 <template>
	<div class="preview-test-paper" v-loading.fullscreen.lock="loading"
		element-loading-text="拼命加载中">
		<el-row class="preview-head" type="flex" align="middle">
			<el-col :span="2" :offset="1">
				<el-button type="text" @click="goBack()"><i class="el-icon-arrow-left"></i>返回</el-button>
			</el-col>
			<!-- <div class="preview-head-btn">
				<el-button type="primary" plain>编辑试卷</el-button>
				<el-button type="primary"  @click="submitForm('ruleForm')">提交</el-button>
			</div> -->
		</el-row>

		<div class="preview-conten maxW">
			
			<div class="preview-conten-details">
				
				<div class="preview-conten-l-h">
					<h3>{{testList.name}}</h3>
					<p>考试时间：{{testList.answer_time ? testList.answer_time : 100}}分钟，满分{{totalScore}}分</p>
				</div>

				<ul>
					<template v-for="type of testList.question_type" >
						<li class="preview-conten-list" :key="type.id">
							
							<!-- <div class="preview-conten-title" v-if="type.id == 1">
								{{type.cn_num}}. {{type.question_type}} (本类题共{{type.count}}小题，每小题{{type.score/type.count}}分，共{{type.score}}分，每小题备选答案中，只有一个符合题意的正确答案。错选，不选均不得分。)
							</div>

							<div class="preview-conten-title"  v-else-if="type.id == 2">
								{{type.cn_num}}. {{type.question_type}} (本类题共{{type.count}}小题，每小题{{type.score/type.count}}分，共{{type.score}}分，每小题备选答案中，有两个或两个以上符合题意的正确答案。多选、少选、错选、不选均不得分。)
							</div>

							<div class="preview-conten-title"  v-else-if="type.id == 9">
								{{type.cn_num}}. {{type.question_type}} (本类题共{{type.count}}小题，每小题{{type.score/type.count}}分，共{{type.score}}分，每小题备选答案中，两个答案中只有一个符合题意的正确答案。)
							</div>
							<div class="preview-conten-title"  v-else>
								{{type.cn_num}}. {{type.question_type}} (本类题共{{type.count}}小题，每小题{{type.score/type.count}}分，共{{type.score}}分，点击文本框，直接在文本框内作答即可。)
							</div> -->
							<div class="preview-conten-title" >
								{{type.cn_num}}. {{type.question_type}} (本类题共{{type.count}}小题，共{{type.score}}分<span v-show="type.common">，{{type.common}}。</span>)
							</div>

							<ul class="preview-conten-subject">

								<template v-for="(item, index) of testList.question_list" v-if="parseInt(item.qt_id) === parseInt(type.id)">
									<li class="preview-conten-subject-c"  v-if="parseInt(item.type_base_id) === 1 || parseInt(item.type_base_id) === 2 || parseInt(item.type_base_id) === 4">

										<template>
											<div  v-if="item.pattern === 1" class="preview-conten-subject-t">
												<i>{{index+1}}. </i>
												<span v-html="item.content"></span>
												<strong>({{item.score}}分)</strong>
											</div>
											<div  v-if="item.pattern === 2" class="preview-conten-subject-t">
												<i>{{index+1}}. </i>
												<span v-html="item.content"></span>
												<strong>({{item.score}}分)</strong>
											</div>
										</template>
										
										<ul class="preview-topic">

											<template v-for="(option,index2) of item.option" >

												<li class="preview-subject-title preview-false option-pattern" v-if="item.type_base_id === 4"  :key="index2">
													<template >
														<el-checkbox disabled :label="option.name"></el-checkbox>
													</template>
												</li>

												<template v-else>
													<li class="preview-subject-title preview-false" v-if="item.pattern === 1" :key="index2">
														<template>
															<el-checkbox disabled :label="option.name"></el-checkbox>
															<div  v-html="option.value"></div>
														</template>
													</li>

													<li class="preview-subject-title preview-false option-pattern" v-if="item.pattern === 2"  :key="index2">
														<template >
															<el-checkbox disabled :label="option.name"></el-checkbox>
															<!-- <div  v-html="option.value"></div> -->
														</template>
													</li>
												</template>
												
											</template>
	
										</ul>
											

										<el-collapse accordion class="preview-answer" v-if='0'>
											<el-collapse-item>
												<template slot="title">
													<div class="preview-accordion-title">
														<span>题型：{{item.question_type}}</span>
														<span>难度： {{item.difficulty}}</span>
														<span v-if="item.keynote == 1">重点程度： 低</span>
														<span v-if="item.keynote == 2">重点程度： 中</span>
														<span v-if="item.keynote == 3">重点程度： 高</span>
													</div>
												</template>
												<div class="preview-accordion-answer">
													<span>正确答案： </span>
													<div>
														<i v-for="answer of item.answer">{{answer}}</i>
													</div>
												</div>
												<div class="preview-accordion-answer">
													<span>统计： </span>
													<div>本题共被作答 {{item.question_info.answer_count}} 次，正确率为 {{item.question_info.true_probability}}%</div>
												</div>
												<div class="preview-accordion-answer">
													<span>解析： </span>
													<template v-if="item.pattern == 1">
														<div v-html="item.resolve"></div>
													</template>
													<template v-if="item.pattern == 2">
														<div>
															<img :src="BASE_URL + item.resolve_path">
														</div>
													</template>
												</div>
											</el-collapse-item>
										</el-collapse>
									</li>

									<li class="preview-conten-subject-c"  v-else>

										<template>
											<div  v-if="item.pattern === 1" class="preview-conten-subject-t">
												<i>{{index+1}}. </i>
												<span v-html="item.content"></span>
												<strong>({{item.score}}分)</strong>
											</div>
											<div  v-if="item.pattern === 2" class="preview-conten-subject-t">
												<i>{{index+1}}. </i>
												<span v-html="item.content"></span>
												<strong>({{item.score}}分)</strong>
											</div>
										</template>
										
										<ul class="preview-topic">
											<li class="preview-subject-title preview-false"  v-for="(option,index2) of item.option" :key="index2">
												<template>
													<el-checkbox disabled :label="option.name"></el-checkbox>
													<div  v-html="option.value"></div>
												</template>
											</li>
										</ul>
											

										<el-collapse accordion class="preview-answer" v-if='0'>
											<el-collapse-item>
												<template slot="title">
													<div class="preview-accordion-title">
														<span>题型：{{item.question_type}}</span>
														<span>难度： {{item.difficulty}}</span>
														<span v-if="item.keynote == 1">重点程度： 低</span>
														<span v-if="item.keynote == 2">重点程度： 中</span>
														<span v-if="item.keynote == 3">重点程度： 高</span>
													</div>
												</template>
												<div class="preview-accordion-answer" v-if="item.qt_id == 1 || item.qt_id == 2 || item.qt_id == 9">

													<span>正确答案： </span>
													<template v-if="item.qt_id == 9">
														<div v-if="item.answer[0] == 'A' "><i>对</i></div>
														<div v-if="item.answer[0]  == 'B' "><i>错</i></div>
													</template>
													<template v-else-if="item.qt_id == 1 || item.qt_id == 2">
														<div><i v-for="answer of item.answer">{{answer}}</i></div>
													</template>
													
												</div>
												<div class="preview-accordion-answer">
													<span>统计： </span>
													<div>本题共被作答 {{item.question_info.answer_count}} 次，正确率为 {{item.question_info.true_probability}}%</div>
												</div>
												<div class="preview-accordion-answer">
													<span>解析： </span>
													<template v-if="item.pattern == 1">
														<div v-html="item.resolve"></div>
													</template>
													<template v-if="item.pattern == 2">
														<div>
															<img :src="BASE_URL + item.resolve_path">
														</div>
													</template>
												</div>
											</el-collapse-item>
										</el-collapse>
									</li>
								</template>

							</ul>
						</li>
					</template>
				</ul>
			</div>


		</div>
		<!-- 预览图片 -->
		<image-viewer 
            v-if="imagePreview.showViewer"
            :initial-index="imageIndex"
            :on-close="closeViewer"
            :url-list="imagePreview.previewSrcList">
        </image-viewer>
	</div>
</template>

<script>
	
	export default {
		data(){
			return {
				imagePreview: {/*图片预览*/
					showViewer: false,
					previewSrcList: []
				},
				headClassList: null, 
				testList:[],		/* 试卷列表 */
				answerList: [],		/* 试卷答案 */
				totalScore: 0,		/* 试卷总分 */
				loading: false,

				imgIndex: 0
			}
		},
		created(){
			this.getTestList()
		},
		computed: {
			imageIndex() {
			    return this.imagePreview.previewSrcList.indexOf(this.imgIndex);
			}

		},
		mounted(){
			/**
			 * 为当前页面创建一个自定义class类名 
			 * @type {[type]}
			 */
			this.headClassList = document.querySelector('#trunk').classList;
			this.headClassList.add('hidden-header')

			document.querySelector('.preview-conten-details').addEventListener('click',  (e)=> {
				
				let [targetSrc ,imgs, srcArr, currentIdx] = ['', '', '', '']
				if (e.target.nodeName === 'IMG') {

					this.imagePreview.showViewer = true
					targetSrc = e.target.src;
					imgs = [...e.target.parentNode.children];
					srcArr = imgs.map(item=>item.currentSrc);
					currentIdx = srcArr.indexOf(targetSrc);

					this.imagePreview.previewSrcList = srcArr
					this.imgIndex = targetSrc

				}
			
			}, false)
		},
		destroyed(){
			/**
			 * 离开当前页面时，移除之前的自定义class类名
			 */
			this.headClassList.remove('hidden-header')
		},
		methods: {
			/**
			 * 关闭图片
			 * @DateTime 2020-04-16T17:40:41+0800
			 * @qiu_m
			 * @return   {[type]}                 [description]
			 */
			 closeViewer() {
			 	this.imagePreview.showViewer = false;
			 	this.imagePreview.previewSrcList = []
			 },
			/**
			 * 返回上一页
			 * @DateTime 2019-07-23T10:42:12+0800
			 * @return   {[type]}                 [description]
			 */
			goBack(){
				this.$router.push('/test')
				// if (this.$route.query.authority) {
				// 	this.$router.push('/test/private-library')
				// }else{
				// 	this.$router.back(-1)
				// }
				// console.log(this.$route)
				
			},
			getSortFun(order, sortBy) {
				var ordAlpah = (order == 'asc') ? '>' : '<';
				var sortFun = new Function('a', 'b', 'return a.' + sortBy + ordAlpah + 'b.' + sortBy + '?1:-1');
				return sortFun;
			},
			/**
			 * 根据参数请求试卷详情
			 * @DateTime 2019-07-22T17:37:30+0800
			 * @return   {[type]}                 [description]
			 */
			getTestList(){
				let success = (res=>{
					this.testList = res.data;
					// 计算试卷的总分数
					for (let s = 0; s < this.testList.question_type.length; s++) {
						this.totalScore += parseInt(this.testList.question_type[s].score)
					};
				/*	this.$nextTick(()=>{
						//改变试题 img 的 url
						let imgArr = document.querySelectorAll('.preview-conten-subject-c img')
						let baseUrl = sessionStorage.getItem('host_addr');
						for (var i = 0; i < imgArr.length; i++) {
							let _temp = imgArr[i].src
							imgArr[i].src = _temp.replace(location.protocol+'//'+location.host, baseUrl);
						}
					})*/
					this.loading = false;
				});

				let params = {
					user_id: this.$g.user_id,
					id: this.$route.query.id
				};

				let fail = (res=>{
					this.$message.error({
						duration: 8000,
						message: res.msg
					})
				})

				this.$ajax({
					url: 'api/newtest/test_detail',
					method: 'get',
					params: params,
					func: {success: success, fail: fail}
				})
			},
		},

	}
</script>
<style>


</style>